<template>
	<view class="live-content">这是一个直播画面</view>
	<scroll-view
		id="scroll"
		class="scroll"
		:scroll-y="true"
		:scroll-top="currentTop"
		@scroll="handle_scroll"
		@scrolltolower="upper"
	>
		<view v-for="(data, index) in scrollData" :key="index" :id="'item-' + index">
			<template v-if="includePage(index)">
				<view
					class="scroll-item"
					:style="{
						backgroundColor: item.color,
						height: '200rpx',
						lineHeight: '200rpx',
						textAlign: 'center',
					}"
					v-for="item in data"
					:key="item.index"
				>
					{{ item.data }}
				</view>
			</template>
			<view v-else :style="{ height: pagesHeight[index] }"></view>
		</view>
	</scroll-view>
	<view v-show="showGoBottom" class="go-back-btn" @click="handle_goBottom">回底</view>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
const currentShowPage = ref(0),
	pagesHeight = [],
	visiblePagesList = ref([-1, 0, 1]);
const scrollData = ref([
	[
		{ color: "#FF8A80", data: 1, index: "index1" },
		{ color: "#CE93D8", data: 2, index: "index2" },
		{ color: "#E040FB", data: 3, index: "index3" },
		{ color: "#1A237E", data: 4, index: "index4" },
		{ color: "#1565C0", data: 5, index: "index5" },
		{ color: "#0288D1", data: 6, index: "index6" },
		{ color: "#00ACC1", data: 7, index: "index7" },
		{ color: "#00B8D4", data: 8, index: "index8" },
		{ color: "#1DE9B6", data: 9, index: "index9" },
		{ color: "#F9A825", data: 10, index: "index10" },
	],
]);

onReady(() => {
	setPageHeight();
	observer(currentShowPage.value);
});

const upper = () => {
	let len = scrollData.value[currentShowPage.value].length - 1;
	let lastNum = scrollData.value[currentShowPage.value][len].data;
	let newArr = [];
	currentShowPage.value += 1;
	for (let index = 1; index <= 10; index++) {
		newArr.push({
			color: getRandomColor(),
			data: lastNum + index,
			index: `index${lastNum + index}`,
		});
	}
	scrollData.value[currentShowPage.value] = newArr;
	nextTick(() => {
		setPageHeight();
		observer(currentShowPage.value);
	});
};

let scrollTop;
const currentTop = ref(0);
const showGoBottom = ref(false);
const handle_scroll = throttle(event => {
	scrollTop = event[0].detail.scrollTop;
	if (scrollTop > 300) {
		showGoBottom.value = true;
	}
}, 100);
const handle_goBottom = () => {
	currentTop.value = scrollTop;
	nextTick(() => {
		currentTop.value = 0;
	});
	showGoBottom.value = false;
};

const setPageHeight = () => {
	let query = uni.createSelectorQuery();
	query
		.select(`#item-${currentShowPage.value}`)
		.boundingClientRect(res => {
			pagesHeight[currentShowPage.value] = res && res.height;
		})
		.exec();
};

const observer = pageNum => {
	const observeView = wx
		.createIntersectionObserver()
		.relativeTo("#scroll", { top: 0, bottom: 0 });
	observeView.observe(`#item-${pageNum}`, res => {
		if (res.intersectionRatio > 0) visiblePagesList.value = [pageNum - 1, pageNum, pageNum + 1];
	});
};

const includePage = index => {
	return visiblePagesList.value.indexOf(index) > -1;
};

const getRandomColor = () => {
	return "#" + Math.random().toString(16).substr(2, 6);
};

function throttle(fnc, delay) {
	let timer;
	return function () {
		let _this = this;
		let args = arguments;
		if (!timer) {
			timer = setTimeout(() => {
				fnc.call(_this, args);
				timer = null;
			}, delay);
		}
	};
}
</script>

<style>
.live-content {
	height: 30vh;
	background-color: lightslategray;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	font-weight: bold;
}
.scroll {
	height: 70vh;
	transform: rotate(180deg);
}
.scroll ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}
.scroll-item {
	transform: rotate(180deg);
}
.go-back-btn {
	width: 100rpx;
	height: 60rpx;
	line-height: 60rpx;
	position: fixed;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	background-color: lightblue;
	border-radius: 10rpx;
}
</style>
